<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/qiye.css">
  <style>
    .products {
      height: 470px;
    }

    .products .header,
    .success .header,
    .evaluate .header,
    .partners .header {
      height: 120px;
    }

    .mr9 {
      margin-right: 9px;
    }

    .products .item {
      width: 200px;
      height: 313px;
      background-color: #efefef;
    }

    .products .more {
      height: 22px;
      background-color: blue;
      text-align: center;
      color: #fff;
      font-size: 10px;
      line-height: 22px;
    }

    .products .about {
      height: 88px;
      overflow: hidden;
      padding-left: 10px;
    }

    .products .about h5 {
      text-align: center;
      margin: 15px 0 12px 0;
    }

    .success {
      background-color: #efefef;
      height: 542px;
    }

    #success .content {
      height: 400px;
      justify-content: space-between;
      flex-wrap: wrap;
    }

    #success .item {
      position: relative;
      width: 320px;
      height: 185px;
      overflow: hidden;
    }

    #success .item img {
      width: 100%;
      height: 100%;
    }

    #success .item .zhe img {
      width: 23px;
      height: 23px;
      margin-bottom: 5px;
    }

    #success .item .zhe {
      position: absolute;
      width: 100%;
      height: 100%;
      content: '';
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #fff;
      transition: all .5s;
      background-color: rgba(000, 000, 000, .4);
    }

    #success .item:hover .zhe {
      transform: translateY(-185px);
    }

    .profile img {
      height: 365px;
    }

    #evaluate img {
      width: 110px;
      height: 110px;
    }

    #evaluate .content {
      height: 270px;
    }

    #evaluate .content .item {
      width: 455px;
      height: 110px;
    }

    #evaluate .item-text {
      width: 318px;
      height: 100%;
    }

    #evaluate a {
      width: 95px;
      height: 20px;
      display: block;
      background-color: #349140;
      text-align: center;
      line-height: 20px;
      font-size: 10px;
      color: #fff;
    }

    .partners {
      background-color: #ebebeb;
      height: 360px;
    }

    .phone {
      height: 80px;
      background: #2a2a2a;
    }
    #phone img{
      width: 38px;
      height: 38px;
    }

    footer{
      height: 415px;
      padding-top: 40px;
      background-color: #141414;
    }
    .footer-top{
      height: 325px;
    }
    .footer-bottom{
      height: 50px;
      background-color: #000;
    }
  </style>
</head>

<body>
  <!-- header -->
  <header class="autorow">
    <div id="header" class="row automargin flex jf-between">
      <div class="logo">
        <img src="./images/图层 1.png" alt="">
      </div>
      <nav class="header-nav flex">
        <ul class="nav-items flex">
          <li class="nav-item">
            <a href="javascript:;">首页</a>
          </li>
          <li class="nav-item">
            <a href="javascript:;">公司</a>
          </li>
          <li class="nav-item">
            <a href="javascript:;">新闻</a>
          </li>
          <li class="nav-item">
            <a href="javascript:;">案例</a>
          </li>
          <li class="nav-item">
            <a href="javascript:;">领域</a>
          </li>
          <li class="nav-item">
            <a href="javascript:;">服务</a>
          </li>
          <li class="nav-item">
            <a href="javascript:;">练习</a>
          </li>
        </ul>
      </nav>
    </div>
  </header>
  <!-- banner -->
  <div class="banner autorow">
    <img src="./images/图层 2.png" alt="">
    <div class="banner-btn all-flex jf-center autorow">
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
  <!-- products -->
  <div class="products autorow">
    <div id="products" class="row automargin">
      <div class="header all-flex flex-c jf-center autorow">
        <div class="title autorow all-flex jf-center">
          <h4 class="fs24 mr9">装修风格分类</h4>
          <p class="fs18 common-gray">/ &nbsp; Products</p>
        </div>
        <div class="introduct all-flex center">
          我们的优势是丰富的经验，对于基于人性化的设计，我们有超过20多年的经验，并不断吸验，并不断吸取新的思想。我们状....
        </div>
      </div>
      <ul class="content all-flex jf-between">
        <li class="item">
          <div class="about">
            <h5 class="fs18">现代简约风格</h5>
            <p class="fs12">特色是将设计的元素、色彩、照明 、原材料简化到最少的程度</p>
          </div>
          <img src="./images/1.png" alt="">
          <div class="more all-flex jf-center">
            &lt;&lt;MORE
          </div>
        </li>
        <li class="item">
          <div class="about">
            <h5 class="fs18">现代简约风格</h5>
            <p class="fs12">特色是将设计的元素、色彩、照明 、原材料简化到最少的程度</p>
          </div>
          <img src="./images/1.png" alt="">
          <div class="more all-flex jf-center">
            &lt;&lt;MORE
          </div>
        </li>
        <li class="item">
          <div class="about">
            <h5 class="fs18">现代简约风格</h5>
            <p class="fs12">特色是将设计的元素、色彩、照明 、原材料简化到最少的程度</p>
          </div>
          <img src="./images/1.png" alt="">
          <div class="more all-flex jf-center">
            &lt;&lt;MORE
          </div>
        </li>
        <li class="item">
          <div class="about">
            <h5 class="fs18">现代简约风格</h5>
            <p class="fs12">特色是将设计的元素、色彩、照明 、原材料简化到最少的程度</p>
          </div>
          <img src="./images/1.png" alt="">
          <div class="more all-flex jf-center">
            &lt;&lt;MORE
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- success -->
  <div class="success autorow">
    <div id="success" class="row automargin">
      <div class="header all-flex flex-c jf-center autorow">
        <div class="title autorow all-flex jf-center">
          <h4 class="fs24 mr9">成功案例</h4>
          <p class="fs18 common-gray">/ &nbsp; Successful case</p>
        </div>
        <div class="introduct all-flex center">
          我们的优势是丰富的经验，对于基于人性化的设计，我们有超过20多年的经验，并不断吸验，并不断吸取新的思想。我们状....
        </div>
      </div>

      <ul class="content flex jf-between">
        <li class="item">
          <img src="./images/5.png" alt="">
          <div class="zhe">
            <img src="./images/椭圆 3 副本.png" alt="">
            <p>张先生家的客厅</p>
          </div>
        </li>
        <li class="item">
          <img src="./images/5.png" alt="">
          <div class="zhe">
            <img src="./images/椭圆 3 副本.png" alt="">
            <p>张先生家的客厅</p>
          </div>
        </li>
        <li class="item">
          <img src="./images/5.png" alt="">
          <div class="zhe">
            <img src="./images/椭圆 3 副本.png" alt="">
            <p>张先生家的客厅</p>
          </div>
        </li>
        <li class="item">
          <img src="./images/5.png" alt="">
          <div class="zhe">
            <img src="./images/椭圆 3 副本.png" alt="">
            <p>张先生家的客厅</p>
          </div>
        </li>
        <li class="item">
          <img src="./images/5.png" alt="">
          <div class="zhe">
            <img src="./images/椭圆 3 副本.png" alt="">
            <p>张先生家的客厅</p>
          </div>
        </li>
        <li class="item">
          <img src="./images/5.png" alt="">
          <div class="zhe">
            <img src="./images/椭圆 3 副本.png" alt="">
            <p>张先生家的客厅</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
  <!-- todo 公司简介 -->
  <div class="profile">
    <img src="./images/企业_02.png" alt="">
  </div>
  <!-- evaluate -->
  <div class="evaluate autorow">
    <div id="evaluate" class="row automargin ">
      <div class="header all-flex flex-c jf-center autorow">
        <div class="title autorow all-flex jf-center">
          <h4 class="fs24 mr9">客户评价</h4>
          <p class="fs18 common-gray">/ &nbsp; evaluate</p>
        </div>
        <div class="introduct all-flex center">
          我们的优势是丰富的经验，对于基于人性化的设计，我们有超过20多年的经验，并不断吸验，并不断吸取新的思想。我们状....
        </div>
      </div>

      <ul class="content flex jf-between flex flex-w">
        <li class="item flex jf-between">
          <div class="item-img">
            <img src="./images/avatar.png" alt="">
          </div>
          <div class="item-text flex jf-between flex-c">
            <h4 class="fs14">标题论坛讨论会专题讨坛讨论会</h4>
            <p class="fs12">我们的优势是丰富的经验，对于基于莫诺原理的我们有超过年的的经验，对于基于莫诺原...</p>
            <a href="javascript:;" class="fs12">
              READ MORE>>
            </a>
          </div>
        </li>
        <li class="item flex jf-between">
          <div class="item-img">
            <img src="./images/avatar.png" alt="">
          </div>
          <div class="item-text flex jf-between flex-c">
            <h4 class="fs14">标题论坛讨论会专题讨坛讨论会</h4>
            <p class="fs12">我们的优势是丰富的经验，对于基于莫诺原理的我们有超过年的的经验，对于基于莫诺原...</p>
            <a href="javascript:;" class="fs12">
              READ MORE>>
            </a>
          </div>
        </li>
        <li class="item flex jf-between">
          <div class="item-img">
            <img src="./images/avatar.png" alt="">
          </div>
          <div class="item-text flex jf-between flex-c">
            <h4 class="fs14">标题论坛讨论会专题讨坛讨论会</h4>
            <p class="fs12">我们的优势是丰富的经验，对于基于莫诺原理的我们有超过年的的经验，对于基于莫诺原...</p>
            <a href="javascript:;" class="fs12">
              READ MORE>>
            </a>
          </div>
        </li>
        <li class="item flex jf-between">
          <div class="item-img">
            <img src="./images/avatar.png" alt="">
          </div>
          <div class="item-text flex jf-between flex-c">
            <h4 class="fs14">标题论坛讨论会专题讨坛讨论会</h4>
            <p class="fs12">我们的优势是丰富的经验，对于基于莫诺原理的我们有超过年的的经验，对于基于莫诺原...</p>
            <a href="javascript:;" class="fs12">
              READ MORE>>
            </a>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <!-- partners -->
  <div class="partners autorow">
    <div id="partners" class="row automargin">
      <div class="header all-flex flex-c jf-center autorow">
        <div class="title autorow all-flex jf-center">
          <h4 class="fs24 mr9">合作伙伴</h4>
          <p class="fs18 common-gray">/ &nbsp; partners</p>
        </div>
        <div class="introduct all-flex center">
          我们的优势是丰富的经验，对于基于人性化的设计，我们有超过20多年的经验，并不断吸验，并不断吸取新的思想。我们状....
        </div>
      </div>

      <div class="partners-img">
        <img src="./images/图层 51.png" alt="">
      </div>
    </div>
  </div>

  <!-- phone -->
  <div class="phone common-green autorow all-flex jf-center">
    <div id="phone" class="row auomargin autoheight all-flex jf-evenly">
      <div class="item flex fs28">
        <img src="./images/图层 29.png" alt="" class=" mr9">
        <p class="all-flex">400-600-8069</p>
      </div>
      <div class="item flex mr9 fs28">
        <img src="./images/图层 53.png" alt="" class=" mr9">
        <p class="all-flex">邮箱：97522380@qq.co</p>
      </div>
    </div>

  </div>

  <footer class="autorow">
    <div id="footer" class="autoheight row automargin">
      <div class="footer-top flex jf-between common-ff">
        <ul class="items">
          <li class="item mb30 fs14">
            公司
          </li>
          <li class="item">公司简介</li>
          <li class="item">公司环境</li>
          <li class="item">优秀团队</li>
          <li class="item">客户及市场</li>
          <li class="item">员工和招聘</li>
        </ul>
        <ul class="items">
          <li class="item mb30 fs14">
            公司
          </li>
          <li class="item">公司简介</li>
          <li class="item">公司环境</li>
          <li class="item">优秀团队</li>
          <li class="item">客户及市场</li>
          <li class="item">员工和招聘</li>
        </ul>
        <ul class="items">
          <li class="item mb30 fs14">
            公司
          </li>
          <li class="item">公司简介</li>
          <li class="item">公司环境</li>
          <li class="item">优秀团队</li>
          <li class="item">客户及市场</li>
          <li class="item">员工和招聘</li>
        </ul>
        <ul class="items">
          <li class="item mb30 fs14">
            公司
          </li>
          <li class="item">公司简介</li>
          <li class="item">公司环境</li>
          <li class="item">优秀团队</li>
          <li class="item">客户及市场</li>
          <li class="item">员工和招聘</li>
        </ul>
        <ul class="items">
          <li class="item mb30 fs14">
            公司
          </li>
          <li class="item">公司简介</li>
          <li class="item">公司环境</li>
          <li class="item">优秀团队</li>
          <li class="item">客户及市场</li>
          <li class="item">员工和招聘</li>
        </ul>
        <ul class="items">
          <li class="item mb30 fs14">
            公司
          </li>
          <li class="item">公司简介</li>
          <li class="item">公司环境</li>
          <li class="item">优秀团队</li>
          <li class="item">客户及市场</li>
          <li class="item">员工和招聘</li>
        </ul>
        <ul class="items">
          <li class="item mb30 fs14">
            公司
          </li>
          <li class="item">公司简介</li>
          <li class="item">公司环境</li>
          <li class="item">优秀团队</li>
          <li class="item">客户及市场</li>
          <li class="item">员工和招聘</li>
        </ul>
        <ul class="items">
          <li class="item mb30 fs14">
            公司
          </li>
          <li class="item">公司简介</li>
          <li class="item">公司环境</li>
          <li class="item">优秀团队</li>
          <li class="item">客户及市场</li>
          <li class="item">员工和招聘</li>
        </ul>
      </div>
      <div class="footer-bottom all-flex jf-between">
        <p class="fs12 common-ff">版权所有：西安兄弟信息科技有限公司　陕ICP备07012704号-1 地址：陕西省西安市经济技术开发区凤城一路中城大厦</p>
        <div class="footer-img">
          <img src="./images/图层 50.png" alt="">
        </div>
      </div>
    </div>
  </footer>
</body>

</html>